<template>
  <div class="dashboard-container">
    <!-- 背景视频层 -->
    <video class="background-video" autoplay muted loop playsinline>
      <source :src="backgroundVideoUrl" type="video/mp4">
      您的浏览器不支持视频播放
    </video>
    
    <!-- 科幻风背景层 -->
    <div class="scifi-background"></div>
    
    <!-- 顶部搜索框 -->
    <div class="search-box">
      <div class="glow-icon" @click="handleSearch">
        <img src="./images/sousuo (2).png" alt="搜索图标" width="21px" height="21px" style="margin-top: 15px;margin-left: 15px;">
      </div>
      <input placeholder="输入搜索内容" v-model="searchText" class="search-input tech-input" @keyup.enter="handleSearch"/>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 桌面样式图标区域 - 动态渲染所有可拖拽元素 -->
      <div class="desktop-icons-container">
        <div v-for="(item, index) in desktopItems" :key="item.id" :class="['desktop-item', item.type]" :draggable="true"
          @dragstart="handleDragStart(index)" @dragend="handleDragEnd" @dragover="(e) => handleDragOver(e, index)"
          @drop="handleDrop" :style="{ opacity: draggingIndex === index ? 0.5 : 1 }">
          <!-- 应用图标 -->
          <template v-if="item.type === 'app'">
            <img :src="item.icon" class="icon-img" :alt="item.name" @click="handleAppClick(item)">
            <div class="icon-name">{{ item.name }}</div>
          </template>

          <!-- 左侧大型时钟小组件 -->
          <template v-if="item.type === 'clockWidget'">
            <div class="large-widget clock-widget">
              <div class="date">{{ currentDate }}</div>
              <div class="time">{{ currentTime }}</div>
              <div class="weekday">{{ currentWeekday }}</div>
              <div class="anniversary">与Tina相识 {{ anniversaryDays }}天</div>
            </div>
          </template>

          <!-- 热搜组件 -->
          <template v-if="item.type === 'hotSearchWidget'">
            <div class="feature-card small-card news-card">
              <div class="card-title">热搜</div>
              <div class="news-list compact">
                <div class="news-item" @click="searchBaidu('万物共生 中国主张')">1. 万物共生 中国主张</div>
                <div class="news-item" @click="searchBaidu('北京即将降温 下周或有雨')">2. 北京即将降温 下周或有雨</div>
                <div class="news-item" @click="searchBaidu('新能源汽车销量创新高')">3. 新能源汽车销量创新高</div>
                <div class="news-item" @click="searchBaidu('人工智能技术新突破')">4. 人工智能技术新突破</div>
              </div>
            </div>
          </template>

          <!-- 应用文件夹 -->
          <template v-if="item.type === 'folder'">
            <div class="app-folder" @click="openFolderPopup(item, $event)">
              <div class="folder-header">{{ item.name }}</div>
              <!-- 文件夹内容 -->
              <div class="folder-content">
                <div v-for="appId in item.apps" :key="appId" class="folder-app">
                  <img :src="getAppById(appId).icon" alt="应用图标" @click="handleFolderIconClick(appId, $event)">
                </div>
              </div>
            </div>
          </template>

          <!-- AI PPT卡片 -->
          <template v-if="item.type === 'aipptWidget'">
            <div class="feature-card ai-ppt-card" @click="handleAppClick(item)">
              <div class="card-title">AI PPT</div>
              <div class="card-desc">AI一键生成PPT</div>
              <button class="card-button">Start Now →</button>
            </div>
          </template>

          <!-- 天气卡片 -->
          <template v-if="item.type === 'weatherWidget'">
            <div class="small-widget" @click="handleAppClick(item)">
              <div class="weather-icon">{{ weatherInfo.icon }}</div>
              <div class="weather-info">{{ weatherInfo.temp }} {{ weatherInfo.city }}</div>
              <div class="weather-desc">{{ weatherInfo.desc }}</div>
            </div>
          </template>

          <!-- 日历卡片 -->
          <template v-if="item.type === 'calendarWidget'">
            <div class="small-widget" @click="handleAppClick(item)">
              <div class="calendar-date">{{ dateObj.date }}</div>
              <div class="calendar-month">{{ dateObj.month }}月</div>
              <div class="calendar-weekday">{{ currentWeekday }}</div>
            </div>
          </template>

          <!-- 小型组件 -->
          <template v-if="item.type === 'smallWidget'">
            <div class="feature-card small-card" :class="item.cardClass" @click="handleAppClick(item)">
              <div class="card-title">{{ item.title }}</div>
              <div class="card-desc">{{ item.desc }}</div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 底部应用栏 -->
    <div class="bottom-apps" 
    style="position: fixed; z-index:6;">
      <div class="app-icon" v-for="app in bottomApps" :key="app.id" @click="handleAppClick(app)">
        <img :src="app.icon" :alt="app.name">
      </div>
    </div>
  </div>

  <!-- 文件夹弹窗 -->
  <div v-if="showFolderPopup" class="folder-popup"
    :style="{ top: popupPosition.top + 'px', left: popupPosition.left + 'px' }" draggable="true"
    @dragstart="handlePopupDragStart($event)" @dragend="handlePopupDragEnd($event)">
    <div class="popup-header">{{ currentFolder.name }}</div>
    <div class="popup-content">
      <div v-for="appId in currentFolder.apps" :key="appId" class="popup-app" draggable="true"
        @dragstart="handleFolderDragStart(currentFolder, appId, $event)"
        @dragover="handleFolderDragOver(currentFolder, appId, $event)"
        @drop="handleFolderDrop(currentFolder, appId, $event)">
        <img :src="getAppById(appId).icon" alt="应用图标" @click="handleFolderIconClick(appId, $event)">
        <div class="popup-app-name">{{ getAppById(appId).name }}</div>
      </div>
    </div>
  </div>

  <!-- 遮罩层 - 点击关闭弹窗 -->
  <div v-if="showFolderPopup" class="popup-overlay" @click="closeFolderPopup"></div>

</template>

<script>
export default {
  data() {
    return {
      // 背景视频URL
      backgroundVideoUrl: "https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr",
      searchText: '',
      currentDate: '',
      currentTime: '',
      currentWeekday: '',
      anniversaryDays: 0,
      dateObj: {
        year: 0,
        month: 0,
        date: 0,
      },
      weatherInfo: {
        icon: '🌤️',
        temp: '28°C',
        city: '北京',
        desc: '今天 25°-32°'
      },
      // 所有应用数据，用于查找
      allApps: [],
      // 拖拽功能相关数据
      desktopItems: [],
      draggingIndex: -1,
      dragOverIndex: -1,
      // 弹窗相关数据
      showFolderPopup: false,
      currentFolder: null,
      popupPosition: {
        top: 0,
        left: 0
      },
      // 弹窗拖拽相关状态
      isDraggingPopup: false,
      dragOffset: {
        x: 0,
        y: 0
      },
      // 文件夹拖拽相关状态
      draggingFolder: null,
      draggingAppId: null,
      folderDragOverIndex: -1,
    };
  },
  computed: {
    bottomApps() {
      return this.desktopItems.filter(item => item.type === 'app');
    }
  },
  created() {
    // 初始化所有数据
    this.initAllData();
    // 设置定时器每秒更新时间
    this.timeInterval = setInterval(() => this.updateTime(), 1000);
    // 设置定时器每30分钟更新天气
    this.weatherInterval = setInterval(() => this.fetchWeatherData(), 30 * 60 * 1000);
    // 初始化可拖拽元素数据
    this.initDesktopItems();
  },
  beforeUnmount() {
    // 清除定时器
    clearInterval(this.timeInterval);
    clearInterval(this.weatherInterval);
  },
  methods: {
    async initAllData() {
      // 初始化时间日期
      this.updateTime();
      // 计算相识天数
      this.calculateAnniversary();
      // 获取天气数据
      await this.fetchWeatherData();
    },
    updateTime() {
      const now = new Date();
      // 更新完整日期
      this.currentDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
      // 更新时间（带秒）
      this.currentTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
      // 更新星期几
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      this.currentWeekday = weekdays[now.getDay()];
      // 更新日期对象（供日历卡片使用）
      this.dateObj = {
        year: now.getFullYear(),
        month: now.getMonth() + 1,
        date: now.getDate()
      };
    },
    calculateAnniversary() {
      // 相识日期（示例：2020年1月1日）
      const anniversaryDate = new Date('2020-01-01');
      const now = new Date();
      // 计算时间差（毫秒）
      const timeDiff = now - anniversaryDate;
      // 转换为天数
      this.anniversaryDays = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
    },
    // 百度搜索功能
    searchBaidu(keyword) {
      // 构建百度搜索URL
      const searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(keyword)}`;
      // 在新窗口打开搜索结果
      window.open(searchUrl, '_blank');
    },
    async fetchWeatherData() {
      try {
        // 模拟API响应数据
        const data = {
          main: { temp: 28, temp_min: 25, temp_max: 32 },
          weather: [{ main: 'Clear' }],
          name: '北京'
        };

        // 处理天气数据
        this.weatherInfo = {
          city: data.name,
          temp: `${Math.round(data.main.temp)}°C`,
          desc: `今天 ${Math.round(data.main.temp_min)}°-${Math.round(data.main.temp_max)}°`,
          icon: this.getWeatherIcon(data.weather[0].main)
        };
      } catch (error) {
        console.error('获取天气数据失败:', error);
      }
    },
    getWeatherIcon(weatherMain) {
      // 根据天气状况返回对应图标
      switch (weatherMain.toLowerCase()) {
        case 'clear': return '☀️';
        case 'clouds': return '☁️';
        case 'rain': return '🌧️';
        case 'snow': return '❄️';
        case 'thunderstorm': return '⛈️';
        case 'mist': return '🌫️';
        default: return '🌤️';
      }
    },
    // 初始化桌面元素数据
    initDesktopItems() {
      // 应用图标数据
      const apps = [
        { id: 1, type: 'app', name: '爱奇艺', icon: new URL('./images/aiqiyi.webp', import.meta.url).href, url: 'https://www.iqiyi.com/' },
        { id: 2, type: 'app', name: '抖音', icon: new URL('./images/douyin.png', import.meta.url).href, url: 'https://www.douyin.com/' },
        { id: 3, type: 'app', name: '快手', icon: new URL('./images/kuaishou.png', import.meta.url).href, url: 'https://www.kuaishou.com/' },
        { id: 4, type: 'app', name: 'QQ音乐', icon: new URL('./images/qqyinyue.jpg', import.meta.url).href, url: 'https://y.qq.com/' },
        { id: 5, type: 'app', name: '腾讯视频', icon: new URL('./images/tengxunshipin.webp', import.meta.url).href, url: 'https://v.qq.com/' },
        { id: 6, type: 'app', name: '微博', icon: new URL('./images/weibo.jpg', import.meta.url).href, url: 'https://weibo.com/' },
        { id: 7, type: 'app', name: '微信', icon: new URL('./images/weixin.jpg', import.meta.url).href, url: 'https://wx.qq.com/' },
        { id: 8, type: 'app', name: '小红书', icon: new URL('./images/xiaohongshu.jpg', import.meta.url).href, url: 'https://www.xiaohongshu.com/' }
      ];

      // 存储所有应用到data属性中，便于后续查找
      this.allApps = apps;

      // 组件数据
      const widgets = [
        { id: 9, type: 'clockWidget' },
        { id: 10, type: 'hotSearchWidget' },
        { id: 11, type: 'folder', name: '文件夹', apps: [2, 3, 8, 1] }, // 添加apps属性存储应用ID
        { id: 12, type: 'aipptWidget', url: 'https://www.aippt.com' },
        { id: 13, type: 'weatherWidget', url: 'https://weather.com' },
        { id: 14, type: 'calendarWidget', url: 'https://calendar.google.com' },
        { id: 15, type: 'smallWidget', title: '待办事项', desc: '快速添加和查看任务', cardClass: 'todo-card', url: 'https://yesdev.cn' },
        { id: 16, type: 'smallWidget', title: '计算器', desc: '简易计算工具', cardClass: 'calculator-card', url: 'http://tool.wuzhou6.com/toolbox/calculator.html' },
        { id: 17, type: 'smallWidget', title: '备忘录', desc: '临时记录想法', cardClass: 'notes-card', url: 'http://www.sxxlzdp.cn/dy/235842.html' },
        { id: 18, type: 'smallWidget', title: '单位转换', desc: '长度/重量/温度转换', cardClass: 'converter-card', url: 'https://c.runoob.com/danwei/' },
        { id: 19, type: 'smallWidget', title: '天气预报', desc: '实时天气和预报信息', cardClass: 'weather-card', url: 'https://m.weather.com.cn/menu.shtml' },
        { id: 20, type: 'smallWidget', title: '日历', desc: '日期查询和提醒', cardClass: 'calendar-card', url: 'https://www.77tianqi.com/' },
        { id: 21, type: 'smallWidget', title: '翻译', desc: '多语言即时翻译', cardClass: 'translator-card', url: 'https://fanyi.baidu.com' },
        { id: 22, type: 'smallWidget', title: '倒计时', desc: '设置重要事件提醒', cardClass: 'timer-card', url: 'https://time.fengjun.wang/countdown' }
      ];

      // 提取所有文件夹中的应用ID
      const folderAppIds = widgets
        .filter(widget => widget.type === 'folder')
        .flatMap(folder => folder.apps);

      // 过滤掉文件夹中已存在的应用
      const desktopApps = apps.filter(app => !folderAppIds.includes(app.id));

      // 合并桌面应用和组件，形成初始布局
      this.desktopItems = [...desktopApps, ...widgets];
    },
    // 拖拽开始事件
    handleDragStart(index) {
      this.draggingIndex = index;
      const item = this.desktopItems[index];
      // 根据拖拽元素类型设置不同的数据
      if (item.type === 'app') {
        event.dataTransfer.setData('text/plain', JSON.stringify({
          type: 'desktopApp',
          appId: item.id,
          index: index
        }));
      } else if (item.type === 'folder') {
        event.dataTransfer.setData('text/plain', JSON.stringify({
          type: 'folder',
          folderId: item.id,
          index: index
        }));
      } else {
        event.dataTransfer.setData('text/plain', JSON.stringify({
          type: 'other',
          index: index
        }));
      }
      // 添加拖拽视觉效果
      setTimeout(() => {
        event.target.classList.add('dragging');
      }, 0);
    },
    // 拖拽结束事件
    handleDragEnd() {
      this.draggingIndex = -1;
      this.dragOverIndex = -1;
      // 移除拖拽视觉效果
      document.querySelectorAll('.desktop-item').forEach(item => {
        item.classList.remove('dragging', 'drag-over');
      });
    },
    // 拖拽经过事件
    handleDragOver(event, index) {
      event.preventDefault();
      if (this.draggingIndex === index) return;

      const dragData = event.dataTransfer.getData('text/plain');
      let parsedData;
      try {
        parsedData = JSON.parse(dragData);
      } catch (e) {
        // 处理旧格式的数据
        parsedData = { type: 'other', index: parseInt(dragData) };
      }

      const targetItem = this.desktopItems[index];

      // 如果拖动的是应用，而目标是文件夹，则不交换位置，只做视觉提示
      if (parsedData.type === 'desktopApp' && targetItem.type === 'folder') {
        // 添加拖拽到文件夹的视觉效果
        document.querySelectorAll('.desktop-item').forEach((item, i) => {
          if (i === index) {
            item.classList.add('drag-over-folder');
          } else {
            item.classList.remove('drag-over', 'drag-over-folder');
          }
        });
        return;
      }

      // 普通的位置交换逻辑
      // 更新拖拽经过的元素索引
      this.dragOverIndex = index;
      const items = [...this.desktopItems];
      // 交换元素位置
      const [movedItem] = items.splice(this.draggingIndex, 1);
      items.splice(index, 0, movedItem);
      this.desktopItems = items;
      // 更新当前拖拽元素索引
      this.draggingIndex = index;

      // 添加拖拽经过视觉效果
      document.querySelectorAll('.desktop-item').forEach((item, i) => {
        if (i === index) {
          item.classList.add('drag-over');
        } else {
          item.classList.remove('drag-over', 'drag-over-folder');
        }
      });
    },
    // 放置事件
    handleDrop(event) {
      event.preventDefault();
      // 移除所有拖拽相关样式
      document.querySelectorAll('.desktop-item').forEach(item => {
        item.classList.remove('dragging', 'drag-over');
      });
    },
    // 应用点击跳转事件
    handleAppClick(app) {
      if (app.url) {
        // 打开新窗口跳转到对应PC端
        window.open(app.url, '_blank');
      }
    },
    handleSearch() {
      if (this.searchText.trim()) {
        this.searchBaidu(this.searchText.trim());
      }
    },
    // 根据ID获取应用，从所有应用中查找
    getAppById(id) {
      return this.allApps.find(app => app.id === id);
    },
    // 打开文件夹弹窗
    openFolderPopup(folder, event) {
      event.stopPropagation(); // 防止事件冒泡
      this.currentFolder = folder;
      this.showFolderPopup = true;

      // 固定弹窗到屏幕正中间
      this.popupPosition = {
        top: '50%',
        left: '50%'
      };
    },
    // 关闭文件夹弹窗
    closeFolderPopup() {
      this.showFolderPopup = false;
      this.currentFolder = null;
    },
    // 点击文件夹图标
    handleFolderIconClick(appId, event) {
      event.stopPropagation(); // 防止事件冒泡
      const app = this.getAppById(appId);
      if (app) {
        this.handleAppClick(app);
      }
    },
    // 文件夹内图标拖拽开始
    handleFolderDragStart(folder, appId, event) {
      this.draggingFolder = folder;
      this.draggingAppId = appId;
      // 添加拖拽类型标识
      event.dataTransfer.setData('text/plain', JSON.stringify({
        type: 'folderApp',
        appId: appId,
        folderId: folder.id
      }));
      setTimeout(() => {
        event.target.classList.add('dragging');
      }, 0);
    },
    // 文件夹内图标拖拽经过
    handleFolderDragOver(folder, appId, event) {
      event.preventDefault();
      if (this.draggingAppId === appId || this.draggingFolder !== folder) return;

      // 更新拖拽经过的索引
      const apps = [...folder.apps];
      const fromIndex = apps.indexOf(this.draggingAppId);
      const toIndex = apps.indexOf(appId);

      if (fromIndex !== -1 && toIndex !== -1) {
        // 交换元素位置
        [apps[fromIndex], apps[toIndex]] = [apps[toIndex], apps[fromIndex]];
        // 更新文件夹应用顺序
        folder.apps = apps;
        // 更新当前拖拽元素ID
        this.draggingAppId = appId;
        this.folderDragOverIndex = toIndex;

        // 添加拖拽经过视觉效果
        document.querySelectorAll('.folder-app, .popup-app').forEach((item, i) => {
          if (i === toIndex) {
            item.classList.add('drag-over');
          } else {
            item.classList.remove('drag-over');
          }
        });
      }
    },
    // 文件夹内图标放置
    handleFolderDrop(folder, appId, event) {
      event.preventDefault();
      document.querySelectorAll('.folder-app, .popup-app').forEach(item => {
        item.classList.remove('dragging', 'drag-over');
      });
      this.folderDragOverIndex = -1;
    },
    // 弹窗拖拽开始
    handlePopupDragStart(event) {
      this.isDraggingPopup = true;
      this.dragOffset = {
        x: event.clientX - this.popupPosition.left,
        y: event.clientY - this.popupPosition.top
      };
    },
    // 弹窗拖拽结束
    handlePopupDragEnd(event) {
      if (this.isDraggingPopup) {
        // 更新弹窗位置
        const newTop = event.clientY - this.dragOffset.y;
        const newLeft = event.clientX - this.dragOffset.x;
        this.popupPosition = {
          top: newTop,
          left: newLeft
        };

        // 更新文件夹在桌面的位置
        if (this.currentFolder) {
          const folderIndex = this.desktopItems.findIndex(item => item.id === this.currentFolder.id);
          if (folderIndex !== -1) {
            // 克隆当前文件夹对象
            const updatedFolder = { ...this.currentFolder };
            // 存储新位置
            updatedFolder.position = {
              top: newTop,
              left: newLeft
            };
            // 更新桌面项目
            this.desktopItems.splice(folderIndex, 1, updatedFolder);
          }
        }

        this.isDraggingPopup = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    overflow-x: hidden;
    background-color: #0d1117; /* 深色背景基调 */
    color: #ffffff;
}

/* 背景视频样式 - 提高亮度让视频更清晰 */
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.99); /* 提高亮度值，让视频更清晰 */
}

/* 科幻风背景 - 降低透明度让视频更可见 */
.scifi-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: 
        radial-gradient(circle at 20% 50%, rgba(30, 64, 175, 0.08) 0%, transparent 45%), /* 降低透明度 */
        radial-gradient(circle at 80% 30%, rgba(139, 92, 246, 0.08) 0%, transparent 45%), /* 降低透明度 */
        linear-gradient(0deg, rgba(14, 55, 101, 0.05) 1px, transparent 1px), /* 降低透明度 */
        linear-gradient(90deg, rgba(14, 55, 101, 0.05) 1px, transparent 1px); /* 降低透明度 */
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
    z-index: 1;
    animation: scifiPulse 20s ease-in-out infinite;
    background-color: rgba(10, 15, 30, 0.3); /* 降低遮罩层透明度 */
}

@keyframes scifiPulse {
    0%, 100% {
        background-position: 
            20% 50%, 80% 30%, 
            0 0, 0 0;
        opacity: 0.7; /* 降低脉冲效果的透明度 */
    }
    50% {
        background-position: 
            25% 55%, 75% 25%, 
            20px 20px, 20px 20px;
        opacity: 0.9; /* 降低脉冲效果的透明度 */
    }
}

/* 顶部搜索框 - 降低背景不透明度 */
.search-box {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 550px;
    height: 50px;
    z-index: 10;
    background: rgba(22, 27, 34, 0.7); /* 降低不透明度 */
    backdrop-filter: blur(10px); /* 降低模糊度 */
    display: flex;
    border-radius: 12px;
    border: 1px solid rgba(48, 54, 61, 0.7); /* 降低边框不透明度 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 降低阴影强度 */
    transition: all 0.3s ease;
    overflow: hidden;
}

.search-box:hover {
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
    transform: translateX(-50%) translateY(-5px);
}

/* 科技风输入框 */
.tech-input {
    height: 100%;
    border: none;
    background: none;
    flex: 1;
    padding: 0 15px;
    color: #e0f7ff;
    font-size: 14px;
}

.tech-input:focus {
    outline: none;
}

.tech-input::placeholder {
    color: rgba(173, 216, 230, 0.6);
    font-style: italic;
}

/* 搜索按钮 - 亮蓝色 */
.glow-icon {
    background: none;
    border: none;
    color: #38bdf8; /* 亮蓝色 */
    font-size: 18px;
    width: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.glow-icon:hover {
    color: #7dd3fc;
    transform: scale(1.2);
}

/* 主内容区域 */
.main-content {
    display: flex;
    justify-content: center;
    padding: 120px 20px 100px;
    gap: 30px;
    min-height: calc(100vh - 120px);
    position: relative;
    z-index: 5;
}

/* 桌面图标容器 */
.desktop-icons-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
    padding: 30px;
    justify-items: center;
    width: 100%;
    max-width: 1600px;
}

/* 桌面图标 */
.desktop-item.app {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 应用图标 */
.icon-img {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border: 2px solid #4a55a2; /* 紫色边框 */
    transition: all 0.3s ease;
}

.desktop-item.app:hover .icon-img {
    transform: translateY(-10px) scale(1.1);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

/* 图标名称 - 亮紫色 */
.icon-name {
    font-size: 13px;
    margin-top: 12px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    color: #c5b9ff; /* 亮紫色 */
    text-shadow: 0 0 5px rgba(168, 85, 247, 0.3);
}

/* 底部应用栏 - 降低背景不透明度 */
.bottom-apps {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 25px;
    padding: 12px 25px;
    background-color: rgba(22, 27, 34, 0.7); /* 降低不透明度 */
    backdrop-filter: blur(10px); /* 降低模糊度 */
    border-radius: 35px;
    z-index: 5;
    border: 1px solid rgba(48, 54, 61, 0.7); /* 降低边框不透明度 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 降低阴影强度 */
    transition: all 0.3s ease;
}

.bottom-apps:hover {
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
    transform: translateX(-50%) scale(1.03);
}

.bottom-apps .app-icon img {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    border: 2px solid #4a55a2;
    transition: all 0.3s ease;
}

.bottom-apps .app-icon:hover {
    transform: translateY(-12px);
}

/* 所有卡片和小组件降低不透明度，让背景更可见 */
.large-widget, .app-folder, .feature-card, .small-widget {
    opacity: 0.85; /* 适当降低不透明度 */
    transition: all 0.3s ease;
}

/* 鼠标悬停时提高不透明度，增强交互感 */
.large-widget:hover, .app-folder:hover, .feature-card:hover, .small-widget:hover {
    opacity: 0.95; /* 悬停时提高不透明度 */
}

/* 大型小组件 - 青色 */
.large-widget {
    width: 300px;
    height: 220px;
    background: #0f4c5c; /* 青色 */
    border-radius: 18px;
    padding: 25px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    border: 1px solid #2b9348;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.large-widget:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.5);
}

/* 时钟组件文字 */
.clock-widget .time {
    font-size: 52px;
    font-weight: bold;
    margin: 12px 0;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
    text-align: center;
}

.clock-widget .date,
.clock-widget .weekday {
    color: #e0f7ff;
    text-align: center;
}

.clock-widget .anniversary {
    font-size: 13px;
    margin-top: 8px;
    color: #a8dadc;
    text-align: center;
}

/* 应用文件夹 - 绿色 */
.app-folder {
    background: #1e3a8a; /* 靛蓝色 */
    border-radius: 18px;
    padding: 20px;
    color: white;
    height: 300px;
    min-width: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    border: 1px solid #3b82f6;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.app-folder:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.folder-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    color: #bfdbfe;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.folder-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 25px;
    justify-items: center;
    align-items: center;
    flex-grow: 1;
}

.folder-app img {
    width: 75px;
    height: 75px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid #60a5fa;
    transition: all 0.3s ease;
}

.folder-app img:hover {
    transform: scale(1.1);
}

/* 特色卡片 - 紫色 */
.feature-card {
    border-radius: 18px;
    padding: 25px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    border: 1px solid #9333ea;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    background: #4c1d95; /* 深紫色 */
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}

.ai-ppt-card {
    height: 240px;
    min-width: 220px;
}

/* 小型小组件 - 橙色 */
.small-widget {
    height: 130px;
    min-width: 220px;
    background: #c2410c; /* 橙色 */
    border-radius: 18px;
    padding: 20px;
    color: white;
    text-align: center;
    position: relative;
    z-index: 2;
    border: 1px solid #ea580c;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.small-widget:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
}

/* 热搜组件 - 红色 */
.news-card {
    grid-column: span 2;
    height: 200px;
    background: #7f1d1d; /* 深红色 */
    border: 1px solid #dc2626;
}

.news-card:hover {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

.news-list.compact {
    margin-top: 15px;
}

.news-list.compact .news-item {
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fef2f2;
    cursor: pointer;
    transition: all 0.3s ease;
}

.news-list.compact .news-item:hover {
    color: #fee2e2;
    padding-left: 8px;
}

/* 小型卡片样式 */
.small-card {
    height: 200px;
    min-width: 220px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.small-card .card-title {
    font-size: 16px;
    margin-bottom: 6px;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.small-card .card-desc {
    font-size: 13px;
    opacity: 0.9;
    color: #f0f0f0;
    line-height: 1.5;
}

/* 不同功能卡片使用不同颜色 */
.todo-card { background: #065f46; border-color: #059669; } /* 绿色 */
.todo-card:hover { box-shadow: 0 0 15px rgba(16, 185, 129, 0.5); }

.calculator-card { background: #4338ca; border-color: #6366f1; } /* 靛蓝色 */
.calculator-card:hover { box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); }

.notes-card { background: #854d27; border-color: #b45309; } /* 棕色 */
.notes-card:hover { box-shadow: 0 0 15px rgba(217, 119, 6, 0.5); }

.converter-card { background: #1e40af; border-color: #3b82f6; } /* 蓝色 */
.converter-card:hover { box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }

.weather-card { background: #0369a1; border-color: #0ea5e9; } /* 天蓝色 */
.weather-card:hover { box-shadow: 0 0 15px rgba(14, 165, 233, 0.5); }

.calendar-card { background: #7c2d12; border-color: #c2410c; } /* 红褐色 */
.calendar-card:hover { box-shadow: 0 0 15px rgba(220, 38, 38, 0.5); }

.translator-card { background: #6b21a8; border-color: #a855f7; } /* 紫色 */
.translator-card:hover { box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }

.timer-card { background: #0891b2; border-color: #22d3ee; } /* 青色 */
.timer-card:hover { box-shadow: 0 0 15px rgba(34, 211, 238, 0.5); }

/* 卡片按钮 - 亮色突出 */
.card-button {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 18px;
    border-radius: 25px;
    margin-top: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start;
    color: white;
}

.card-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* 天气和日历小组件样式 */
.weather-icon {
    font-size: 42px;
    margin-bottom: 8px;
}

.weather-info {
    font-size: 18px;
    font-weight: bold;
}

.weather-desc {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 5px;
}

.calendar-date {
    font-size: 42px;
    font-weight: bold;
}

.calendar-month {
    font-size: 18px;
}

.calendar-weekday {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 5px;
}

/* 拖拽相关样式 */
.desktop-item {
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.desktop-item.dragging {
    opacity: 0.8;
    transform: scale(1.1);
    z-index: 100;
}

.desktop-item.drag-over {
    transform: scale(1.05) translateY(-5px);
}

/* 文件夹弹窗 - 降低不透明度 */
.folder-popup {
    position: fixed;
    background: rgba(30, 58, 138, 0.7); /* 降低不透明度 */
    backdrop-filter: blur(10px); /* 降低模糊度 */
    border-radius: 18px;
    padding: 20px;
    width: 320px;
    z-index: 1000;
    border: 1px solid rgba(59, 130, 246, 0.7); /* 降低边框不透明度 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 降低阴影强度 */
    cursor: default;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.folder-popup:hover {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.popup-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #bfdbfe;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.popup-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    cursor: default;
}

.popup-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 8px;
    border-radius: 12px;
}

.popup-app:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.popup-app img {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid #60a5fa;
}

.popup-app-name {
    font-size: 13px;
    color: white;
    margin-top: 8px;
    text-align: center;
}

/* 弹窗遮罩层 - 降低不透明度 */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3); /* 降低遮罩透明度 */
    backdrop-filter: blur(3px); /* 降低模糊度 */
    z-index: 999;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .desktop-icons-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .desktop-icons-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .news-card {
        grid-column: span 1;
    }
}

@media (max-width: 600px) {
    .desktop-icons-container {
        grid-template-columns: 1fr;
        padding: 20px 10px;
        gap: 20px;
    }

    .search-box {
        width: 90%;
        height: 45px;
    }

    .large-widget {
        width: 260px;
        height: 200px;
    }
    
    .clock-widget .time {
        font-size: 42px;
    }
}

.dashboard-container{
  width: 100%;
  min-height: 100vh;
  height: auto;

  position: relative;
  overflow: hidden;
}
</style>
